class Mytabs {
    // 属性写在这里 
    constructor(selector,options){
        this.ele = document.querySelector(selector);
        this.btns = this.ele.querySelectorAll('ul > li');
        this.boxs = this.ele.querySelectorAll('ol > li');
        this.options = options || {}
    }

    // 写在原型上的方法 写在这里 
    init(){
        for(let i=0;i<this.btns.length;i++){
            this.btns[i].addEventListener(this.options.type || 'click',()=>{
                // 移出所有的按钮高亮  内容全部隐藏 
                for(let j=0;j<this.btns.length;j++){
                    this.btns[j].classList.remove('active');
                    this.boxs[j].classList.remove('active');

                }
                // 点击谁谁高亮  内容显示
                this.btns[i].classList.add('active');
                this.boxs[i].classList.add('active');
            });
        }
    }

}

// 函数是对语句的封装   多个语句放到盒子中 
// 面相对象 类  是对函数的封装  多个函数放在一个类中 

